<template>
  <div class="status-container">
    <!-- 状态标签 -->
    <el-tag :type="statusInfo.type" size="small">
      {{ statusInfo.text }}
    </el-tag>

    <!-- 审核失败时显示原因 -->
    <el-tooltip
      v-if="isFailed && failedMessage"
      effect="dark"
      :content="`失败原因：${failedMessage}`"
      placement="top"
    >
      <i
        class="el-icon-info"
        style="color: #f56c6c; margin-left: 8px; cursor: pointer"
      ></i>
    </el-tooltip>
  </div>
</template>

<script>
import { positionStatusMap, isFailedStatus } from "@/util/positionStatus";

export default {
  props: {
    status: {
      type: String,
      required: true,
      validator: (value) => {
        if (!value) return false;
        const validStatuses = [
          "NORMAL",
          "VERIFY_COMPANY_FAILED",
          "VERIFY_MANAGER_FAILED",
          "VERIFY_COMPANY_REVIEW",
          "VERIFY_MANAGER_REVIEW",
        ];
        return validStatuses.includes(value);
      },
    },
    scene: {
      type: String,
      required: true,
      validator: (value) => {
        return ["code", "positionId"].includes(value);
      },
      default: "code",
    },
    failedMessage: {
      type: String,
      default: "",
    },
  },
  computed: {
    statusInfo() {
      const statusConfig = positionStatusMap[this.status];
      if (!statusConfig) {
        return {
          text: this.status || "未知状态",
          type: "default",
        };
      }
      if (typeof statusConfig === "object" && statusConfig[this.scene]) {
        return statusConfig[this.scene];
      }
      return statusConfig;
    },
    isFailed() {
      return isFailedStatus(this.status, this.scene);
    },
  },
};
</script>